<template>
  <div>
    <h1>todos</h1>
    <input
      type="text"
      id="input"
      placeholder="What needs to be done?"
      v-model="newItem"
      @keyup.enter="addToList(newItem)"
    />
    <div v-for="item in itemList">
      <input type="checkbox" v-model="item.isCom" @click="showClearBtn()" />
      <p>{{ item.item }}</p>
    </div>
    <div>{{ this.itemList.length }} item left</div>
    <button v-show="this.showClear" @click="clearCom()">All</button>
    <button v-show="this.showClear" @click="clearCom()">Active</button>
    <button v-show="this.showClear" @click="clearCom()">Completed</button>
    <button v-show="this.showClear" @click="clearCom()">Clear Completed</button>
  </div>
</template>
<script>
export default {
  name: "TdModel",
  data() {
    return {
      newItem: "",
      itemList: [
        { item: "a", isCom: false },
        { item: "b", isCom: false },
        { item: "c", isCom: false },
      ],
      showClear: false,
    };
  },
  methods: {
    addToList(newItem) {
      if (newItem === "") {
        return;
      }
      this.itemList.push({
        item: newItem,
        isCom: false,
      });
      this.newItem = "";
    },
    clearCom() {
      this.itemList.forEach((e) => {
        if (e.isCom) {
          this.itemList.pop(e);
        }
      });
    },
    showClearBtn() {
      let count = 0;
      this.itemList.forEach((e) => {
        if (e.isCom) {
          count++;
        }
      });
      this.showClear = count > 0 ? true : false;
      console.log(this.showClear);
      console.log(count);
    },
    filter(type) {
      switch (type) {
        case "active":
          break;
        case "completed":
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style></style>
